<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!--注意头部的视口标签,使移动端也可以正常使用-->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <link
      type="text/css"
      rel="stylesheet"
      href="../static/plugins/bootstrap/css/bootstrap.css"
    />

    <style>
      .imageDiv {
        display: inline-block;
        width: 100px;
        height: 100px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px dashed darkgray;
        background: #f8f8f8;
        position: relative;
        overflow: hidden;
        margin: 10px;
      }

      .cover {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0.3);
        display: none;
        line-height: 99px;
        text-align: center;
        cursor: pointer;
      }

      .cover .delbtn {
        color: red;
        font-size: 20px;
        font-style: normal;
      }

      .imageDiv:hover .cover {
        display: block;
      }

      .addImages {
        display: inline-block;
        width: 100px;
        height: 100px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px dashed darkgray;
        background: #f8f8f8;
        position: relative;
        overflow: hidden;
        margin: 10px;
      }

      .clickUpload {
        text-align: center;
        display: inline-block;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 5px 0;
      }

      .clickUpload span {
        font-size: 40px;
      }

      .fileUpload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <!--多图片上传可用于pc端移动端例如添加评论图片上传图片轮播等-->
    <form method="post" id="passForm">
      <div id="fileCenter">
        <p style="color: red; padding: 0 10px">注：每张照片大小不超过4M</p>
        <div class="fileImgDiv">
          <div class="addImages">
            <input
              type="file"
              class="fileUpload"
              id="fileInput"
              multiple=""
              accept="image/png, image/jpeg, image/gif, image/jpg"
            />
            <div class="clickUpload">
              <span>+</span>
              <p>点击上传</p>
            </div>
          </div>
        </div>
      </div>

      <!--上传后图片的div-->
      <div class="msg" style="display: none"></div>
    </form>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script type="application/javascript">
      $(function () {
        //图片上传
        imagUpload();

        function imagUpload() {
          //用于判断浏览器的类型
          var userAgent = navigator.userAgent;

          $(".fileUpload").change(function () {
            //获取选择图片的对象
            var docObj = $(this)[0];
            var picDiv = $(this).parents(".fileImgDiv");

            //得到所有的图片文件
            var fileList = docObj.files;
            console.log(fileList);

            //循环遍历，将获取到的图片文件添加到html元素上
            for (var i = 0; i < fileList.length; i++) {
              //动态地添加到html元素上
              var picHTML =
                "<div class='imageDiv' ><img style='object-fit:cover;' id='img" +
                fileList[i].name +
                "' /><div class='cover'><i class='delbtn'>删除</i></div></div>";
              //将picHTML添加到picDiv
              picDiv.prepend(picHTML);

              //获取图片img的对象
              var picObjectPreview = document.getElementById(
                "img" + fileList[i].name
              );
              if (fileList && fileList[i].name) {
                //设置图片属性
                picObjectPreview.style.display = "block";
                picObjectPreview.style.width = "100px";
                picObjectPreview.style.height = "100px";

                //picObjectPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
                if (userAgent.indexOf("MSIE") == -1) {
                  //IE以外浏览器
                  //获取上传图片文件的物理路径;
                  picObjectPreview.src = window.URL.createObjectURL(
                    docObj.files[i]
                  );
                } else {
                  //IE浏览器
                  if (docObj.value.indexOf(",") != -1) {
                    var srcArr = docObj.value.split(",");
                    picObjectPreview.src = srcArr[i];
                  } else {
                    picObjectPreview.src = docObj.value;
                  }
                }
              }
            }

            //删除图片
            deleteImg();
          });
        }

        function deleteImg() {
          //图片删除
          $(".delbtn").click(function () {
            $(this).parents(".imageDiv").remove();
          });
        }
      });
    </script>
  </body>
</html>
